<%-- 
    Document   : RepGastos
    Created on : 08-15-2012, 11:31:57 PM
    Author     : Alex
--%>

<%@include file="/include/header.jsp" %>

<style>
    divGastos {width: 800px; margin:0 auto;}
    fieldset {
        border:1px solid #5C9AD7;
        width: 810px;
        margin:0 auto;
    }
    
    legend {
        padding: 0.2em 0.5em;
        border: 1px solid #5C9AD7;
        color: #366998;
        font-size: 14px;
        font-weight: bold;
        text-align: right;    
    }
</style>

<script type="text/javascript">
$(document).ready(function(){
    $("#fechaIni").datepicker({dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, yearRange: "1900:2020"});
    $("#fechaFin").datepicker({dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, yearRange: "1900:2020"});
});

function search(){
    var form = document.getElementById("reporteDeGastosForm");
    var tipoG = getRadioButtonSelectedValue(form.tipoG);
    form.tipoGasto.value = tipoG;
    form.submit();
}

function searchX(){
    
    var url = getBaseURL();
        url = url + "ReporteDeGastos.jsa?cmd=Recibo";
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                var url2 = getBaseURL();
                url2 = url2 + "ReporteDeGastos.jsa?cmd=init";
                window.location.href = url2;
            }
        }
        xmlHttp.open("GET",url,true);
        xmlHttp.send();
    
    var form = document.getElementById("reporteDeGastosForm");
    form.cmd.value = "Recibo";
    form.submit();
}


function getRadioButtonSelectedValue(ctrl){
    for(i=0;i<ctrl.length;i++)
        if(ctrl[i].checked) return ctrl[i].value;
}

$(function() {
    $( "#radio" ).buttonset();
});


</script>

<div class="content">
    <html:form styleId="reporteDeGastosForm" action="/ReporteDeGastos">
        <html:hidden property="cmd" value="ConstruirReporteDeGastos" />
        <html:hidden property="tipoGasto" value="F" />
        <table class="form">
            <caption class="titleSeg">Reporte de Gastos</caption>
            <tr class="campos">
                <td class="label">Concepto:&nbsp;</td>
                <td colspan="4" class="control"><html:text property="concepto" styleId="concepto" styleClass="tinput412" /></td>
            </tr>
            <tr class="campos">
                <td class="label">Desde:&nbsp;</td>
                <td class="control"><html:text property="fechaIni" styleId="fechaIni" /></td>
                <td style="width: 50px"></td>
                <td class="label">Hasta:&nbsp;</td>
                <td class="control"><html:text property="fechaFin" styleId="fechaFin" /></td>
            </tr>
        </table>
        <table class="form">
            <logic:present name="tipog" scope="request">
                <%
                    int i = 0;
                    String tipo = request.getAttribute("tipog").toString();
                    if(tipo.equals("F")){
                        i = 1;
                    } else {
                        i = 2;                          
                    }
                %>
                
                <tr class="campos">
                    <td>
                        <div id="radio">
                            <table style="font-size: 10px;">
                                <tr>
                                    <td style="text-align: center">
                                        <input type="radio" id="radio1" <% if(i == 1) out.print("checked='checked'"); %> name="tipoG" value="F" /><label for="radio1">Gastos Presupuestados</label>
                                    </td>
                                    <td style="width: 35px"></td>
                                    <td style="text-align: center">
                                        <input type="radio" id="radio2" <% if(i == 2) out.print("checked='checked'"); %> name="tipoG" value="V" /><label for="radio2">Gastos Adicionales</label>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </logic:present>
            <logic:notPresent name="tipog" scope="request">
            <tr class="campos">
                <td>
                    <div id="radio">
                        <table style="font-size: 10px;">
                            <tr>
                                <td style="text-align: center">
                                    <input type="radio" id="radio1" name="tipoG" checked="checked" value="F" /><label for="radio1">Gastos Presupuestados</label>
                                </td>
                                <td style="width: 35px"></td>
                                <td style="text-align: center">
                                    <input type="radio" id="radio2" name="tipoG" value="V" /><label for="radio2">Gastos Adicionales</label>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            </logic:notPresent>
            <tr class="campos">
                <td style="text-align: center">
                    <input type="button" class="button" onclick="search();" value="Buscar" />
                </td>
            </tr>
            <logic:present name="msg">
            <tr>
                <td><br /></td>
            </tr>
            <tr>
                <td class="success">
                    <html:img src="./images/ok.png" />&nbsp;
                    <html:messages id="mensaje" name="msg"><bean:write name="mensaje" /></html:messages>
                </td>
            </tr>
            </logic:present> <!-- Cierre del Logic de mensajes -->
            <logic:present name="errors">
            <tr>
                <td><br /></td>
            </tr>
            <tr>
                <td class="errors">
                    <html:img src="./images/error.png" />&nbsp;<html:errors name="errors" />
                </td>
            </tr>
            </logic:present> <!-- Cierre del Logic de errores -->
        </table>
    </html:form>
    <table class="tablePres">
        <tr>
            <td>
                <logic:present name="reporte" scope="request">
                    <fieldset>
                        <legend>Reporte de Gastos</legend>
                            <div id="tablaGastos" class="ui-widget-content ui-corner-all">
                                <display:table pagesize="10" name="reporte" requestURI="" class="results" style="width:100%;" id="results" export="true">
                                    <display:column property="idGasto" title="No." style="text-align:center;" sortable="true" />
                                    <display:column property="concepto" title="Concepto" sortable="true" />
                                    <display:column property="monto" title="Monto" sortable="true" />
                                    <display:column property="fechaReg" title="Fecha Registro" sortable="true" />
                                    <display:column property="estado" title="Estado" sortable="true" />
                                    <display:column property="justificacion" title="Justificacion" sortable="true" />
                                    <display:column property="usuarioUltCambio" title="Usuario" sortable="true" />
                                    <display:column property="fechaUltCambio" title="Ultima Mod." sortable="true" />
                                    <display:column property="tipoGasto" title="Tipo" sortable="true" />
                                    <display:column property="beneficiados" title="Beneficiados" style="text-align:right;" sortable="true" />
                                </display:table>
                                <script>
                                    var table = document.getElementById("results");
                                    var rows = table.getElementsByTagName("tr");
                                    for (var i = 1; i < rows.length; i++) {
                                        rows[i].onmouseover = function() {
                                            this.className += ' hilite';
                                        }
                                        rows[i].onmouseout = function() {
                                            this.className = this.className.replace(' hilite', '');
                                        }
                                    }
                                </script>
                            </div>
                        </fieldset>
                </logic:present>
            </td>
        </tr>
    </table>
    <br />
</div>
<%@include file="/include/footer.jsp" %>